<script setup>
	import FirstTitle from "@comp/FirstTitle";
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";
	import {
		onMounted
	} from "vue";
	import {
		searchDataZhbz
	} from "@/api/search";
	import {
		addOrUpdateZhbz
	} from "@/api/addOrUpdate";

	import {
		postTableData
	} from "@/api/table";


	const city = window.globalObj.name;
	const editorRef = shallowRef();

	const toolbarConfig = {};
	const editorConfig = {
		placeholder: "请输入内容..."
	};
	const mode = ref("default");

	// 加载html
	const initHtml = () => {
		searchDataZhbz({
			m: "附件"
		}).then((res) => {
			const {
				data
			} = res
			valueHtml.value = data.find((x) => x.k === "附件")?.v || "";
		})
	};

	const handleCreated = (editor) => {
		editorRef.value = editor; // 记录 editor 实例，重要！
	};

	const valueHtml = ref(
		"主要包括重点人防工程分布图、物资储备分布和保障区域划分图、重要交通节点分布图和装备器材需求统计表、物资需求统计表、经费预算表等<br/>1.某某市装备器材需求统计表<br/>2.某某市生活物资需求统计表<br/>3.某某市救灾物资需求统计表<br/>4.某某市经费预算表"
	);

	const saveProgramme = () => {
		ElMessageBox.confirm(`确定要保存吗?`, "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			customClass: "message-box",
		}).then(() => {
			addOrUpdateZhbz({
					m: "附件",
					data: [{
						k: "附件",
						v: valueHtml.value,
					}],
				})
				.then((result) => {
					if (result.code === 200) {
						ElMessage.success("操作成功");
						initHtml();
					} else {
						ElMessage.error(result.msg);
					}
				})
				.catch(() => {});
		});
	}


	onBeforeUnmount(() => {
		const editor = editorRef.value;
		if (!editor) return;
		editor.destroy();

	});

	// 表头单元格样式
	const headerCellStyle = () => {
		return {
			backgroundColor: "#f5f7fa",
			color: "rgba(0,0,0,0.85)",
			fontSize: "14px",
			height: "54px",
		};
	};
	// 单元格样式
	const cellStyle = () => {
		return {
			color: "rgba(0,0,0,0.65)",
			fontSize: "14px",
			lineHeight: "22px",
		};
	};

	const tableData = ref([])
	const tableData1 = ref([])
	const tableData2 = ref([])
	const tableData3 = ref([])
	const getList = () => {
		return postTableData({
			docType: "comprehensiveSupport",
			method: "zhuanyezhuangbeiqicaiqingkuang",
		}).then(result => {
			if (result.code === 200) {
				tableData.value = result.data
			}
		})
	}
	const getList1 = () => {
		return postTableData({
			docType: "comprehensiveSupport",
			method: "shenghuowuzizhanchuqingkuang",
		}).then(result => {
			if (result.code === 200) {
				tableData1.value = result.data
			}
		})
	}
	const getList2 = () => {
		return postTableData({
			docType: "comprehensiveSupport",
			method: "jiuzaiwuziqingkuang",
		}).then(result => {
			if (result.code === 200) {
				tableData2.value = result.data
			}
		})
	}
	const getList3 = () => {
		return postTableData({
			docType: "comprehensiveSupport",
			method: "jingfeiyusuan",
		}).then(result => {
			if (result.code === 200) {
				tableData3.value = result.data
			}
		})
	}

	onMounted(async () => {
		await initHtml();
		await getList()
		await getList1()
		await getList2()
		await getList3()
	});
</script>
<template>
	<div class="">
		<FirstTitle name="附件" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
				:mode="mode" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode" @onCreated="handleCreated" />
		</div>

		<FirstTitle name="装备器材保障能力现状" class="top-15" />
		<div class="top-15 text-center">
			{{city}}装备器材需求统计表（单位:套）
		</div>

		<el-table id="table" :data="tableData" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" width="100" align="center" />
			<el-table-column prop="jd_name" label="行政区划" />
			<el-table-column prop="gongshui" label="供水抢救抢修" />
			<el-table-column prop="dianli" label="电力抢救抢修" />
			<el-table-column prop="ranqi" label="燃气抢救抢修" />
			<el-table-column prop="gongre" label="供热抢救抢修" />
			<el-table-column prop="daoqiao" label="道桥抢救抢修" />
			<el-table-column prop="jianzhu" label="建筑抢救抢修" />
			<el-table-column prop="xiaofang" label="消防救援" />
			<el-table-column prop="yiliao" label="医疗救护" />
			<el-table-column prop="fanghuafangyi" label="防化防疫专业队" />
			<el-table-column prop="zhian" label="治安专业队" />
			<el-table-column prop="jiaotong" label="交通运输" />
			<el-table-column prop="tongxin" label="通信" />
			<el-table-column prop="xinxi" label="信息防护" />
			<el-table-column prop="xinli" label="心理防护" />
			<el-table-column prop="fangwei" label="伪装防护" />
			<el-table-column prop="hehua" label="核化检测洗消" />
		</el-table>
		
		<FirstTitle name="生活物资" class="top-15" />
		<div class="top-15 text-center">
			{{city}}生活物资需求统计表（单位:万kg））
		</div>
		<el-table id="table" :data="tableData1" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" width="100" align="center" />
			<el-table-column prop="jd_name" label="行政区划" />
			<el-table-column prop="wz_name" label="物资" />
			<el-table-column prop="standard" label="标准" />
			<el-table-column prop="measuring_unit" label=" 计量单位" />
			<el-table-column prop="storage_sum" label=" 数量" />
			<el-table-column prop="note" label=" 说明" />
		</el-table>
		
		
		
		<FirstTitle name="救灾物资" class="top-15" />
		<div class="top-15 text-center">
			{{city}}救灾物资需求统计表
		</div>
		<el-table id="table" :data="tableData2" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" width="100" align="center" />
			<el-table-column prop="jd_name" label="行政区划" />
			<el-table-column prop="equ_name" label="物资" />
			<el-table-column prop="standard" label="标准" />
			<el-table-column prop="unit" label=" 计量单位" />
			<el-table-column prop="number" label=" 数量" />
			<el-table-column prop="remark" label=" 说明" />
		</el-table>
		
		
		
		
		<FirstTitle name="经费预算" class="top-15" />
		<div class="top-15 text-center">
			{{city}}经费预算表
		</div>
		<el-table id="table" :data="tableData3" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" width="100" align="center" />
			<el-table-column prop="jd_name" label="行政区划" />
			<el-table-column prop="name" label="名称" />
			<el-table-column prop="money" label="数额(万元)" />
			<el-table-column prop="kaizhi_scope" label=" 主要开支范围" />
			<el-table-column prop="remark" label=" 备注" />
		</el-table>






		<div class="flex-justify-end top-20">
			<el-button type="primary" class="save-btn" @click="saveProgramme">保存</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss"></style>